<template>
    <el-dialog v-model="open" title="Discount" width="23%" align="center" style="position: relative;" draggable>
        <span style="position: absolute;left:4%;top:30%">Total Amount:${{ subTotal }}</span>
        <div style="display: flex;position: absolute;top:50%;left:4%">
            <p>
                <span>Discount:</span>
                <el-input v-model="CalculatedNumber"  style="width: 80px;margin-left:4px;" />
            </p>
            <p style="margin-left:10px;">
                <span>or</span>
                <el-input v-model="ratio" @input="calculation" style="width: 80px;margin-left: 4px;" />
                <span>%</span>
            </p>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="discountSave">Save</el-button>
                <el-button @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'

const props = defineProps({
    subTotal: Number
})
const emits = defineEmits(['calculation','discountSave'])
const open = ref(false)
const ratio = ref('')
const CalculatedNumber = ref('')
const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
const calculation = () => {
    emits('calculation')
}
const discountSave = () => {
    emits('discountSave','discount')
}
defineExpose(
    {
        ratio,
        CalculatedNumber,
        open,
        dialogopen
    }
)
</script>
<style>
.el-dialog__footer {
    margin-top: 30px;
}
</style>